﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<title>Loading Hiearachical JSON objects</title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <link rel="stylesheet" type="text/css" href="style.css" />

	<script type="text/javascript" src="scripts/shCore.js"></script>
	
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>

	<link type="text/css" rel="stylesheet" href="scripts/shCoreDefault.css"/>

	<link type="text/css" rel="stylesheet" href="scripts/shThemeDefault.css"/>

	<script type="text/javascript">SyntaxHighlighter.all();</script>

	<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.loadJSON.js" type="text/javascript"></script>
    	<script language="javascript" type="text/javascript">
    	    $(document).ready(function () {
    	        $('li').loadJSON('hierarchy.js');
    	    });
    	</script>
</head><body>
    <div id="page-wrap">
	<a href="http://code.google.com/p/jquery-load-json/" alt="Home">Home</a>
        <div id="contact-area">
            <h1>
                Loading Hiearachical JSON objects</h1>
            JQuery loadJSON plugin enables you to load hierachical JSON objects and generate hierarchical 
            structures of HTML elements based on the template. In the <a href="list.html">list</a> example
            is shown how the array of the objects can be loaded into the template. In this example, array
            of the objects is exdended so each object in the array have its own array as a property. As a re
            <h2>
                Live Example</h2>
            In this example will be used extended template that can be used for complex objects. Example of
            the resulting page is shown below:
            <br />
            <br />
            
            <ul><h2>Companies</h2>
                <li><a href="details.html" class="ID">
                        <span id="Name" class="Name"></span></a> <span
                    id="Address" class="Address"></span>
                    <h3>Manager:</h3>
                        <span class="Manager">
                           <span class="FirstName"></span> <span class="LastName"></span>     
                        </span>
                    <h3>Employees:</h3>
                    <dl class="Employees">
                        <dt class="FirstName"></dt><dd class="LastName"></dd>
                    </dl>
                </li>
            </ul>
            <p>In this example for each company in the list is shown one manager and nested list of all employees.
            Details about implementation is described in the sections below.</p>
            <br />
            <h2>
                Implementation</h2>
            <p>
                In the HTML should be placed one item that represents a template item that will
                be populated with elements from the JSON array. Example is shown below:
            </p>
            <pre class="brush: xml;">
            &lt;ul&gt;&lt;h2&gt;Companies&lt;/h2&gt;
                &lt;li&gt;&lt;a href=&quot;details.html&quot; class=&quot;ID&quot;&gt;
                        &lt;span id=&quot;Name&quot; class=&quot;Name&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;span id=&quot;Address&quot; class=&quot;Address&quot;&gt;&lt;/span&gt;
                    &lt;h3&gt;Manager:&lt;/h3&gt;
                        &lt;span class=&quot;Manager&quot;&gt;
                           &lt;span class=&quot;FirstName&quot;&gt;&lt;/span&gt; &lt;span class=&quot;LastName&quot;&gt;&lt;/span&gt;     
                        &lt;/span&gt;
                    &lt;h3&gt;Employees:&lt;/h3&gt;
                    &lt;dl class=&quot;Employees&quot;&gt;
                        &lt;dt class=&quot;FirstName&quot;&gt;&lt;/dt&gt;&lt;dd class=&quot;LastName&quot;&gt;&lt;/dd&gt;
                    &lt;/dl&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
	</pre>
    <p>
            In this template are placed three elements where properties ID, Name, and Address
            of some JSON object will be populated. loadJSON plugin will take JSON array, bind
            properties of the elements of the array to template and replicate template item
            bound with each element in the array. Additionally, inside the LI element is placed 
            SPAN with class Manager where are placed two SPAN elements for manager's first name and last name,
            and data list with class "Employees" where can be placed first and last name of employees.
            <br />
            Once HTML template item is prepared it is required to provide a JSON array that
            will be used to populate template item shown above. Example of JSON array used in
            this example is shown below:
            </p>
            <pre class="brush: js;">        
[   	{        "ID": 17,        		"Name": "Emkay Entertainments",        "Address": "Nobel House, Regent Centre",        "Manager": {							"FirstName": "John",						"LastName": "Doe"					},        "Employees": [ {							"FirstName": "Brian",							"LastName": "Hunt"						},                       {								"FirstName": "Mick",							"LastName": "Henning"						}                    ]    	},    	{        "ID": 18,		"Name": "The Empire",		"Address": "Milton Keynes Leisure Plaza",        "Manager": { 						"FirstName": "Ana",						"LastName": "Johnsnon"					},        "Employees": [ 						{							"FirstName": "Erick",							"LastName": "O'Neil"						},                       {							"FirstName": "George",							"LastName": "Halloway"						}                    ]		}
]
	</pre>
            <p>This array contains elements with properties ID, Name, and Address that will be
            bound directly to the elements in the HTML template. Additionaly it has nested object
            Manager with the FirstName and LastName properties, and nested array of Employees with
            their own FirstName and LastName properties. JQuery loadJSON plugin generate nested list
            Employees records inside each of the generated company records. This way is implemented
            hierachical template for nested objects.
            <br />
            Template is defined in the LI HTML element, and under assumption that JSON
            array is placed into the "hierarchy.js" file, the following code generates output HTML
            using template and JSON array:
            </p>
            <pre class="brush: js;">                $(&#39;li&#39;).loadJSON(&#39;hierarchy.js&#39;);
	        </pre>
            <p>As a results of this call will be generated output shown in the live example above.</p>
        </div>
    </div>
</body>
</html>